---
title: babel.config.js
description: A reference for Babel configuration file.
---

import { Terminal } from '~/ui/components/Snippet';

Babel is used as the JavaScript compiler to transform modern JavaScript (ES6+) into a version compatible with the JavaScript engine on mobile devices.

Each new Expo project created using `npx create-expo-app` configures Babel automatically and uses [`babel-preset-expo`](https://github.com/expo/expo/tree/main/packages/babel-preset-expo) as the default preset. There is no need to create a **babel.config.js** file unless you need to customize the Babel configuration.

## Create babel.config.js

If your project requires a custom Babel configuration, you need to create the **babel.config.js** file in your project by following the steps below:

1. Navigate to the root of your project and run the following command inside a terminal. This will generate a **babel.config.js** file in the root of your project.

<Terminal cmd={['$ npx expo customize babel.config.js']} />

2. The **babel.config.js** file contains the following default configuration:

```js babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};
```

3. If you make a change to the **babel.config.js** file, you need to restart the Metro bundler to apply the changes and use `--clear` option from Expo CLI to clear the Metro bundler cache:

<Terminal cmd={['$ npx expo start --clear']} />

## babel-preset-expo

[`babel-preset-expo`](https://github.com/expo/expo/tree/main/packages/babel-preset-expo) is the default preset used in Expo projects. It extends the default React Native preset (`@react-native/babel-preset`) and adds support for decorators, tree-shaking web libraries, and loading font icons.
